<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2.策略模式典型应用之表单验证</title>
</head>
<body>
    <form id="userForm">
        账号：<input type="text" name="userName" id="userName"> <br>
        密码：<input type="text" name="password" id="password"> <br>
        电话：<input type="text" name="callphone" id="callphone"> <br>
        邮箱：<input type="text" name="email" id="email"> <br>
        <button type="submit">提交</button>
    </form>
    <script>
        let form = document.getElementById('userForm');
        // 验证库
        let verifyTool = (function () { 
            // 验证策略
            let rules = {
                notEmpty: function (value, msg) {
                    if (value == '') {
                        return msg;
                    }
                },
                minLength: function (value,num,msg) {
                    value = value.trim();
                    if(value.length<num){
                        return msg; 
                    }
                },
                maxLength: function (value,num,msg) { 
                    value = value.trim();
                    if(value.length>num){
                        return msg;
                    }
                },
                isMobile: function (value,msg) { 
                    let reg = /^1[^1-4]\d{9}$/;
                    if(!reg.test(value)){
                        return msg;
                    }
                }

            }
            let checks =[];
            // 收集验证函数
            function add(element,params) {
                checks.push(function () { 
                    let value = element.value;
                    let rulesType = params.shift();
                    params.unshift(value);
                    return rules[rulesType] && rules[rulesType](...params);
                 });
                 console.log('checks:',checks)
             };
             // 统一触发验证函数执行
             function start() { 
                 for(let i=0;i<checks.length;i++){
                     let msg = checks[i]();
                     if(msg){
                         return msg
                     }
                 }
              }
            // 增加验证规则
            function addRules(rulesName,ruleFn) { 
                let hadKey = rules.hasOwnProperty(rulesName);
                !hadKey && (
                    rules[rulesName] = ruleFn
                )
                // console.log(hadKey);
             }
            return {
                rules,
                add,
                start,
                addRules
            }
        })();


        form.onsubmit = function () {
            verifyTool.addRules('verifyEmail', function (value,msg) { 
                let emailReg = /^\w+@\w+[.]\w+$/;
                if (!emailReg.test(value)) {
                    return msg
                }
             });
            verifyTool.add(form.userName, ['notEmpty','用户名不能为空']);
            verifyTool.add(form.password, ['minLength',6,'密码不少于6位']);
            verifyTool.add(form.password, ['maxLength',10,'密码不超过10位']);
            verifyTool.add(form.callphone, ['isMobile','手机号不合法']);
            verifyTool.add(form.email, ['verifyEmail','邮箱不合法']);
            let msg = verifyTool.start();
            if(msg) {
                alert(msg);
                return false;
            }
            console.log('用户点击了提交按钮');
         }
    </script>
    
</body>
</html>